<template>
	<uv-tabs :list="list" @click="clickTab" :activeStyle="{
		color: '#303133',
		fontWeight: 'bold',
		transform: 'scale(1.05)'
	}" :inactiveStyle="{
		color: '#606266',
		transform: 'scale(1)'
	}"></uv-tabs>
	<view v-if="flag" class="home">
		<blog-item v-for="item in arrList" :item="item"></blog-item>
		<view class="edit" @click="goEdit">
			<text class="iconfont icon-a-21-xiugai"></text>
		</view>
	</view>
	<view v-else>
		<view style="display: flex;flex-direction: column;">
			<uv-button color="red" text="查询" type="success" shape="circle" style="width: 250px;align-self: center;"
				@click="getData"></uv-button>
			<view>
				<uni-list>
					<uni-list-item v-for="(item,index) in arrList" :key="index" :title="item.name" :note="item.age"
						:thumb="item.picurls[0] || item.user_id[0].user_avater"
						:rightText="item.user_id[0].nickname"></uni-list-item>
				</uni-list>

			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				list: [{

						name: '最新',
						badge: {
							isDot: false
						}
					},
					{

						name: '推荐',
						badge: {
							isDot: false
						}

					}
				],
				flag: true,
				arrList: []

			}
		},
		onLoad() {},
		onShow() {
			this.getData()
		},
		methods: {
			//	//uni_modules/uni-id-pages/pages/login/login-withpwd   /pages/edit/edit

			clickTab(item) {
				console.log("点了", item.index)
				if (item.index == 0) {
					this.flag = true
				} else {
					this.flag = false
				}
			},
			goEdit() {
				console.log("点了跳转。。。。。")
				uni.navigateTo({
					url: '/pages/edit/edit',
				});

			},

			async getData() {
				const db = uniCloud.database();

				console.log("打印-------- ------------》")
				//关联查询
				// let artTemple = db.collection("user").field("name,age,user_id").getTemp();//主表 一般放在collection的第一个参数
				// let userTemp = db.collection("uni-id-users").field("_id,nickname,avatar_file.url as user_avater").getTemp();//虚拟表 collection的第二个参数
				// (db as any).collection(artTemple, userTemp).orderBy("_id", "asc").get().then(res => {
				// 	console.log("成功", res)
				// 	arrList.value = res.result.data
				// }).catch(err => {
				// 	console.log("失败了", err)
				// })


				// 客户端联表查询

				let artTemp = db.collection("quanzi_article").field(
					"title,user_id,description,picurls,comment_count,like_count,view_count,publish_date").getTemp();
				let userTemp = db.collection("uni-id-users").field("_id,nickname,avatar_file")
					.getTemp();
				db.collection(artTemp, userTemp).get()
					.then(res => {
						console.log("文章内容展示", res)
						this.arrList = res.result.data
					})

				//搜索
				// db.collection("user").get().then(res => {
				// 	console.log("搜索成功", res)
				// 	arrList.value = res.result.data;
				// 	console.log("测试", arrList.value)
				// }).catch(err => {
				// 	console.log("下载失败.....")
				// })
				//增加
				// db.collection("user").add({
				// 	name: "ss",
				// 	age: 21
				// }).then(res => {
				// 	console.log("打印.....", res)
				// }).catch(err => {
				// 	console.log("失败....", err)
				// })
				//修改
				// db.collection("user").doc("65af29e76e5d2ddb51d0c06a").update({
				// 	name: "666"
				// }).then(res => {
				// 	console.log("修改成功", res)
				// }).catch(err => {
				// 	console.log("修改失败", err)
				// })
			}
		},

	}
</script>

<style lang="scss" scoped>
	.home {
		.topnav {
			margin-bottom: 30rpx;
		}

		.loadingState {
			padding: 30rpx;
		}

		.content {
			.item {
				padding: 30rpx;
				border-bottom: #f7f7f7 15rpx solid;
			}
		}

		.edit {
			width: 120rpx;
			height: 120rpx;
			background: #0199fe;
			border-radius: 50%;
			color: #fff;
			position: fixed;
			z-index: 100;
			bottom: 150rpx;
			right: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: 0 0 20rpx rgba(1, 153, 254, 0.8);

			.iconfont {
				font-size: 50rpx;
			}
		}
	}
</style>